<template>
    <div id="customersList">
        <!-- <h1>销售员的客户列表</h1> -->
        <!-- ----------- 严晴---------- -->
        <h3 class="lh">查看我的客户</h3>
        <el-table :data="salesToCustomers" border>
            <el-table-column prop="name" label="姓名"> </el-table-column>
            <el-table-column prop="age" label="年龄"> </el-table-column>
            <el-table-column prop="gender" label="性别"> </el-table-column>
            <el-table-column prop="phone" label="联系方式"> </el-table-column>
            <el-table-column prop="IDCard" label="身份证号"> </el-table-column>
            <el-table-column prop="money" label="账户金额"> </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!-- 修改 -->
                    <el-button
                        type="primary"
                        icon="el-icon-edit"
                        circle
                        @click="
                            $router.push(`modifyCustomers/${scope.row._id}`)
                        "
                    ></el-button>
                    <!-- 删除 -->
                    <el-button
                        type="danger"
                        icon="el-icon-delete"
                        circle
                        @click="delCustomers(scope.row._id)"
                    ></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 5, 7, 9]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
var { mapActions, mapState, mapMutations } = createNamespacedHelpers(
    "customers"
);
export default {
    data() {
        return {
            belongToSales: localStorage.getItem("_id"), //从本地获取的销售员ID
        };
    },
    methods: {
        ...mapActions(["getSalesToCustomers", "delSalesToCustomers"]),
        ...mapMutations(["changePageSize", "changeCurrentPage"]),
        //  改变每页数据的条数
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.changePageSize(val);
            this.getSalesToCustomers(this.belongToSales);
        },
        //  改变当前页
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.changeCurrentPage(val);
            this.getSalesToCustomers(this.belongToSales);
        },
        //  删除
        delCustomers(_id) {
            // console.log(_id);
            this.delSalesToCustomers(_id);
            this.getSalesToCustomers(this.belongToSales);
        },
    },
    computed: {
        //在计算属性中调用辅助函数
        ...mapState([
            "salesToCustomers",
            "total",
            "pages",
            "pageSize",
            "currentPage",
        ]),
    },
    mounted() {
        //  页面挂载完成去获取销售员的客户数据
        this.getSalesToCustomers(this.belongToSales);
    },
};
</script>

<style>
#customersList .el-table {
    line-height: 25px;
    text-align: center;
}
#customersList .el-table th,
.el-table td {
    text-align: center;
}
.lh {
    line-height: 50px;
}
#customersList .el-pagination {
    margin: 20px 0px;
}
</style>